<!-- 65 组件 82页面 -->
<template>
  <div class="page-wrap">
    <a-space class="common-button-group">
      <a-button
      class="t9-form-wideget-btn-default"
        type="primary"
        :loading="searchBtnLoading"
        @click="handleSearch"
        >{{ $t("common_query") }}</a-button
      >
    </a-space>
    <t-query-form
      layout="inline"
      ref="queryForm"
      group="TabUnShip"
     :model="queryForm"
    >
          <a-form-item
            :label="$t('T9_shopId')"
            name="shopId"
            prop="shopId"
            :rules="{
              required: true,
              message: $t('valid_required2'),
              trigger: 'change',
            }"
          >
            <a-select
              v-model:value="queryForm.shopId"
              class="t9-form-wideget-input-default"
              :placeholder="$t('common_pleaseSelect')"
              allow-clear
            >
              <a-select-option
                v-for="item in shopIdArr"
                :key="item.shopId"
                :value="item.shopId"
              >
                {{ item.shopId }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_productType')" name="productType" prop="productType"  :rules="{
              required: true,
              message: $t('valid_required2'),
              trigger: 'blur',
            }">
           <a-select
              v-model:value="queryForm.productType"
              class="t9-form-wideget-input-default"
              :placeholder="$t('common_pleaseSelect')"
              allow-clear
              show-search
            >
              <a-select-option
                v-for="item in options.productTypeList"
                :key="item.value"
                :value="item.value"
              >
                {{ item.value }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_productId')" name="productId" prop="productId">
           <a-select
              v-model:value="queryForm.productId"
              class="t9-form-wideget-input-default"
              @change="getProductIdDesc"
              :placeholder="$t('common_pleaseSelect')"
              allow-clear
              show-search
            >
              <a-select-option
                v-for="item in productIdArr"
                :key="item.productId"
                :value="item.productId"
                 :description="item.description"
              >
                {{ item.productId }}
              </a-select-option>
            </a-select>
          </a-form-item>
           <a-form-item label="">
          <a-input  class="t9-form-wideget-input-default" v-model:value="productIdDesc" disabled/>
           </a-form-item>
          <a-form-item :label="$t('T9_owner')" name="owner" prop="owner">
           <a-select
              v-model:value="queryForm.owner"
              class="t9-form-wideget-input-default"
              :placeholder="$t('common_pleaseSelect')"
              allow-clear
              show-search
            >
              <a-select-option
                v-for="item in options.ownerIdList"
                :key="item.value"
                :value="item.value"
              >
                {{ item.value }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_cstId')" name="cstId" prop="cstId">
          <a-input  class="t9-form-wideget-input-default" v-model:value="queryForm.cstId" allow-clear :placeholder="$t('common_pleaseEnter1')" />
          </a-form-item>
    </t-query-form>
       <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-2"
    >
      <a-col :span="15" class="global-oper-row-title">{{
        $t("T9_cstList")
      }}</a-col>
      <a-col :span="8" class="global-oper-row-extra">
        <a-button class="t9-form-wideget-btn-default" @click="getExport" :loading="exportBtnLoading" type="primary">{{ $t("T9_toExcel") }}</a-button>
      </a-col>
    </a-row>
     <div class="page-wrap-table">
    <t-table align="center" :data="list.tableData" @checkbox-change="handleChange" @checkbox-all="handleChange" max-height="100%">
      <t-column type="checkbox" width="50"></t-column>
      <t-column min-width="100" field="cstId" :title="$t('T9_cstId')" />
      <t-column min-width="100" field="productType" :title="$t('T9_productType')" />
      <t-column min-width="100" field="owner" :title="$t('T9_owner')" />
      <t-column min-width="100" field="cstGrade" :title="$t('T9_cstGrade')" />
      <t-column min-width="100" field="productId" :title="$t('T9_productId')" />
      <t-column min-width="130" field="productSpecVer" :title="$t('T9_productSpecVer')" />
      <t-column min-width="100" field="priority" :title="$t('T9_priority')" />
      <t-column min-width="100" field="glassQty" :title="$t('T9_glassQty')" />
      <t-column min-width="100" field="eqpId" :title="$t('T9_eqpId')" />
      <t-column min-width="140" field="destinationBayId" :title="$t('T9_destinationBayId')" />
      <t-column min-width="100" field="sortGrade" :title="$t('T9_sortGrade')" />
      <t-column min-width="100" field="groupId" :title="$t('T9_groupId')" />
      <t-column min-width="100" field="shipGroupId" :title="$t('T9_shipGroupId')" />
      <t-column min-width="100" field="route" :title="$t('T9_route')" />
      <t-column min-width="100" field="processState" :title="$t('T9_processState')" />
      <t-column min-width="100" field="receiveFlag" :title="$t('T9_receiveFlag')" />
      <t-column min-width="100" field="shipTimeKey" :title="$t('T9_shipTimeKey')" />
      <t-column min-width="100" field="operation" :title="$t('T9_operation')" />
    </t-table>
     </div>
     <div class='data-form page-wrap-bottom mt-1'>
        <a-form
          ref="dataForm"
          layout="inline"
          :colon="false"
          :model="dataForm"
          :rules="rules"
        >
          <a-form-item
            :label="$t('T9_destinationBayId')"
            name="destinationBayId"
            prop="destinationBayId"
          >
            <a-select
              v-model:value="dataForm.destinationBayId"
              class="t9-form-wideget-input-default"
              @change="getBayId"
              :placeholder="$t('common_pleaseSelect')"
              allow-clear
              show-search
            >
              <a-select-option
                v-for="item in areaList"
                :key="item.areaName"
                :value="item.areaName"
              >
                {{ item.areaName }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_comment')" class="comment-box" name="eventComment" style="width:100%">
            <a-row type="flex" justify="space-between" align="middle">
              <a-col :span="21">
                <a-textarea allow-clear v-model:value="dataForm.eventComment" :rows="1" :title="dataForm.eventComment" />
              </a-col>
              <a-col :span="2">
                <a-button class="t9-form-wideget-btn-default" type="primary"  :loading="confirmBtnLoading" @click="handleConfirm">{{ $t('T9_confirm') }}</a-button>
              </a-col>
            </a-row>
          </a-form-item>
        </a-form>
      </div>
      <!-- <ModalPasswordConfirm v-model:value="visible" @ok="handleOk"/> -->
  </div>
</template>

<script>
import { defineComponent } from 'vue'
  import { utils } from 'twork'
  import * as api from '@/api/common'
  import initOptionsMixin from '@/mixins/initOptionsMixin'
    import { downloadBlobFile } from '@/utils/download'
  // import ModalPasswordConfirm from '@/components/ModalPasswordConfirm.vue'

  export default defineComponent({
    name: 'TabUnShip',
    // components: { ModalPasswordConfirm },
    mixins: [initOptionsMixin],
    data() {
      return {
        visible: false,
        searchBtnLoading: false,
        confirmBtnLoading: false,
        exportBtnLoading: false,
        export: false,
        productIdDesc: '',
        lotListData: [],
        areaList: [],
        list: {
          tableData: []
        },
        options: {
        },
        dataForm: {
          eventComment: '',
          eventUser: '',
          destinationBayId: undefined
        },
        shopIdArr: [],
        productIdArr: [],
        queryForm: {
          shopId: 'ARRAY',
          cstId: undefined,
          productType: undefined,
          productId: undefined,
          owner: undefined
        },
        rules: {
        eventComment: [{ required: true, message: this.$t('valid_required2'), trigger: 'blur' }],
        destinationBayId: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }]
        }
      }
    },
    computed: {

    },
    watch: {
      'queryForm.productType': {
        handler(productType) {
          this.queryForm.productId = ''
          this.productIdDesc = ''
          api.getProductId({ productType, shopId: this.queryForm.shopId, version: '80002' }).then(res => {
            this.productIdArr = res
          })
        }
      }
    },
    created() {
      this.initOptions([{ name: 'productType' }])
      this.initOptions([{ name: 'ownerId', params: { ownerType: '', version: '80002' } }])
      this.getShopId()
      this.getAreaList()
    },
    methods: {
        getAreaList() {
        const params = {
          areaType: 'ProductionArea',
          resourceState: 'InService',
          shopId: 'CELL'
        }
        api.getAreaList(params).then(res => {
          this.areaList = res
        })
      },
       handleChange(row) {
        this.lotListData.push(row.row)
      },
      getProductIdDesc(val, o) {
        this.productIdDesc = o.description
      },
      handleSearch() {
        this.$refs.queryForm.validate().then(() => {
           if (this.searchBtnLoading) return
          this.searchBtnLoading = true
          this.getList()
        })
      },
      getList() {
        const obj = {
          dtoName: 'UnShipDTO',
          queryId: 'GetUnshipLotList',
          version: '80010',
          menuName: 'unShip',
          usage: 'getUnShipList',
          export: this.export,
          ...this.queryForm
        }
        api.getList(obj).then((res) => {
          if (this.export) {
             downloadBlobFile(res, 'cstList')
             this.exportBtnLoading = false
          } else {
            this.searchBtnLoading = false
            this.list.tableData = res
          }
        }).catch(error => {
          this.searchBtnLoading = false
          this.exportBtnLoading = false
          console.log(error)
        })
      },
       getExport() {
        if (!this.list.tableData.length) return
        if (this.exportBtnLoading) return
        this.exportBtnLoading = true
        this.export = true
        this.getList()
      },
      getShopId() {
        const params = {
        }
        api.getShopId(params).then((res) => {
          this.shopIdArr = res
        })
      },
       handleConfirm() {
        this.$refs.dataForm.validate().then(() => {
           if (!this.lotListData.length) {
            this.$message.error(this.$t('T9_errTip1'))
            return
          }
           utils.secondConfirm().then(() => {
        // 校验成功：执行用户提交请求
        this.handleOk()
      }).catch(err => {
        // 取消/校验失败
        console.log(err)
      })
          // this.visible = true
        }).catch((error) => {
          console.log('error', error)
        })
      },
      handleOk() {
        this.visible = false
        this.confirmBtnLoading = true
        const params = {
          menuName: 'unShip',
          usage: 'confirm',
          language: 'English',
          shopId: this.queryForm.shopId,
          lotListData: this.lotListData.length ? this.lotListData.map(t => {
            const {
             cstId = t.cstId,
             operation = t.operation,
             route = t.route,
             bayId = this.dataForm.destinationBayId,
             shopId = this.queryForm.shopId,
             lotId = t.lotId,
             eqpId = t.eqpId
                } = t
            return {
              cstId,
              operation,
              route,
              bayId,
              shopId,
              eqpId,
              lotId
            }
          }) : [],
          eventUser: this.$store.state.user.uid,
          eventComment: this.dataForm.eventComment
        }
        api.confirm(params).then(() => {
          this.confirmBtnLoading = false
          this.getList()
          this.lotListData = []
        }).catch(error => {
          this.confirmBtnLoading = false
          console.error(error)
        })
      }
    }
  })
</script>
<style lang="less" scoped>
.t9-form-wideget-input-default {
  width: 150px
}
</style>
